<template>
  <h1>隐藏显示指令</h1>
<!-- v-if="布尔值" true 元素显示  false 元素消失
     false 表示该元素不会被渲染到DOM中,直接跳过该元素的渲染-->
  <p v-if="false">黄霄雲</p>
  <p v-if="true">孙雪宁</p>
  <hr>
<!-- v-show="布尔值" true 元素显示  false 元素消失
     false 表示该元素会被渲染到DOM中,但是会被隐藏,但是占位
     通过修改display属性来控制元素的显示隐藏,CSS元素的display属性,默认为block,可以设置为none,隐藏元素,但是占位-->
  <p v-show="false">李庚希</p>
  <p v-show="true">刘浩存</p>
  <hr>
  <p v-if="isShow">李庚希</p>
  <p v-else>刘浩存</p>
</template>
<script setup>
import {ref} from "vue";

const isShow = ref(false);
</script>
<style scoped>

</style>